<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .layui-card-body {height:60px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:30px;font-size:12px}
</style>
<div class="layuimini-container layuimini-page-anim">

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12">
                <div id="echarts-dataset" style="background-color:#ffffff;min-height:450px;padding: 10px"></div>
            </div>

        </div>


    </div>
</div>
<script>
    layui.use(['layer','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
        /**
         * 报表功能
         */

        //[{"name":"物业费","counts":1},
        // {"name":"水费","counts":2},{"name":"电费","counts":1}]
        $.ajax({
            url:"repair/queryTongJi",
            type:"POST",
            dataType:'json',
            success:function(data){
                console.log(data);
                //定义两个空字符串变量str和str2，用于存储后续将要生成的图表x轴和y轴的数据。
                var str="";
                //使用for...in循环遍历返回的数据对象，将每一个数据对象的name属性值添加到变量str中，并在每个name属性值后面添加逗号。
                for(var p in data){
                    str=str+data[p].name+",";
                }
                var str2="";
                for(var p in data){
                    str2=str2+data[p].counts+",";
                }
                //通过substring方法去掉str末尾的逗号，生成最终的x轴数据字符串strResult，使用split方法将其转换为数组。
                str=str.substring(0,str.length-1);
                var strResult=str.split(",");

                str2=str2.substring(0,str2.length-1);
                var strResult2=str2.split(",");
                //创建一个新的echarts实例，引用walden主题。
                var myChart = echarts.init(document.getElementById('echarts-dataset'), 'walden');

                var app = {};
                //包含x轴、y轴和数据系列，
                option = null;
                option = {
                    //x轴的数据为strResult
                    xAxis: {
                        type: 'category',
                        data: strResult
                    },
                    //y轴为数值类型
                    yAxis: {
                        type: 'value'
                    },
                    //数据系列中的数据为strResult2，图表类型为柱状图。
                    series: [{
                        data: strResult2,
                        type: 'bar'
                    }]
                };
                ;
                //判断option对象存在且是object类型，如果满足条件，则使用setOption方法将option配置应用于图表中。
                if (option && typeof option === "object") {
                    //后端的数据被作用于图表中的x轴、y轴以及数据系列中。数据被解析后，转换为字符串数组，并根据数组的索引与名称进行匹配，插入到了option配置对象的对应位置中，最终生成了一张基于返回数据的柱状图表。
                    myChart.setOption(option, true);
                }
            }


        });

    });
</script>
